<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-image: url(./grid.png);
    }

    svg {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>

<body>
  <svg width="500" height="500">
    <!-- 1. 绘制矩形: 6个基本属性 rx、ry为圆角的半径-->
    <rect x="10" y="10" width="80" height="80" rx="20" ry="10"></rect>

    <!-- 2. 绘制圆形：3个基本属性 cx、cy为圆心x、y轴位置 -->
    <circle cx="150" cy="50" r="40" fill="black"></circle>

    <!-- 3. 绘制椭圆形：4个基本属性 cx、cy为圆心 rx、ry为x、y轴半径 -->
    <ellipse cx="250" cy="50" rx="50" ry="25"></ellipse>

    <!-- 4. 绘制直线：4个基本属性 x1、y1起点 x2、y2终点 -->
    <line x1="305" y1="50" x2="395" y2="50" stroke="black" stroke-width="5"></line>

    <!-- 5. 折线(起点和终点不会自动闭合) 基本属性：points fill：默认填充黑色，transparent表示透明 stroke：描边 -->
    <polyline points="400 0, 430 90, 450 50, 470 70, 490 30, 500 50" fill="transparent" stroke="black"></polyline>

    <!-- 6. 多边形折线(起点和终点会自动闭合)  -->
    <polygon points="0 100, 30 190, 50 150, 70 170, 90 130, 100 110" fill="green" stroke="black" stroke-width="3">
    </polygon>

    <!-- 7. 路径path（默认不会闭合） 1个基本属性 d：表示点的集合，必须M命令开头，意思是moveTo；Z表示闭合 -->
    <path d="M 150 100, 100 150, 150, 200, 200 150 Z" fill="green" stroke="black"></path>
    <!-- 完整写法 M/m：moveTo L/m：lineTo Z/z：close path 小写表示相对定位，相对一上一个坐标点移动x、y -->
    <path d="M 250 100, L 200 150, L 250, 200, l 50 -50 Z" fill="green" stroke="black"></path>

    <!-- 8. 图片 svg2.0 写法 -->
    <image x="300" y="100" href="./imgs/googlelogo_color_92x30dp.png" width="100" height="100"></image>
    <!-- svg 1.0 写法 -->
    <!-- <image x="300" y="100" xlink:href="./imgs/googlelogo_color_92x30dp.png" width="100" height="100"></image> -->
    <!-- 兼容 svg2.0 和 svg1.0 写法 -->
    <!-- <image x="300" y="100" xlink:href="./imgs/googlelogo_color_92x30dp.png" href="./imgs/googlelogo_color_92x30dp.png" width="100" height="100"></image> -->

    <!-- 9. 文字 text-anchor：文本流方向熟悉 dominant-baseline：基线对齐方式 sng还提供了同css一样的文字属性比如font-size、font-weight等 -->
    <text x="450" y="150" text-anchor="middle" dominant-baseline="middle" font-size="24">
      文字显
      <!-- tspan：标记大块文本的子部分 必须在text或tspan元素中嵌套使用 alignment-baseline：基线对齐方式 -->
      <tspan x="470" y="180" fill="red">示</tspan>
    </text>

    <!-- 10. 元素的组合g 只具有全局属性、一些css属性https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute、事件属性、动画属性transform等 -->
    <g fill="transparent" stroke="black">
      <circle cx="25" cy="225" r="25"></circle>
      <circle cx="50" cy="225" r="25"></circle>
      <circle cx="75" cy="225" r="25"></circle>
    </g>

    <!-- 11. 元素的复用 defs和use -->
    <!-- defs 定义的元素不会显示 使用的时候才会显示 参照的坐标系是用户坐标系viewbox -->
    <defs>
      <g id="groupDefs" fill="transparent" stroke="black">
        <circle cx="25" cy="225" r="25"></circle>
        <circle cx="50" cy="225" r="25"></circle>
        <circle cx="75" cy="225" r="25"></circle>
      </g>
    </defs>
    <!-- x、y相对于复制元素的位置，在原来的位置上增加x、y -->
    <use href="#groupDefs" x="100" y="0"></use>

    <!-- 12. 元素的复用 symbol和use -->
    <!-- symbol 相比于 refs，有自己的属性，而defs无需定义自己的属性 -->
     <!-- x、y表示symbol元素的x、y坐标 -->
    <symbol viewBox="0 0 100 100" id="groupSymbol">
      <rect x="0" y="0" width="100" height="100" fill="red"></rect>
    </symbol>
    <!-- width、height指的是svg或symbol元素的宽高 -->
    <use href="#groupSymbol" x="200" y="200" height="80" width="80"></use>

    <!-- 13. 填充fill和描边stroke fill-opacity：填充的透明度 -->

    <!-- 14. css样式定义svg样式，共4中方式给svg添加样式 -->

    <!-- 15. 渐变色、模糊 -->

    <!-- 16. 形变 transform：translate、rotate、scale、skew -->

    <!-- 17. 描边动画 -->

    <!-- n. 公共属性 fill：填充颜色 stroke：描边颜色 stroke-width：线条宽度 -->
  </svg>
</body>

</html>

<!-- 
  
  -->